<template>
  <div class="contant">
    <div class="header inner">
      <div class="header_info">
        <div class="header_info_imgs">
          <img src="../../assets/imgs/indexPage/u28.svg" />
          <img class="ml5" src="../../assets/imgs/indexPage/u27.svg" />
        </div>
        <div v-if="this.$store.state.loginState">
          <el-dropdown @command="loginout">
            <span class="el-dropdown-link">
              账户名：{{ this.uid
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="login_btns" v-else>
          <button @click="handleLogin" class="login_btns_l">登录</button>
        </div>
      </div>
    </div>
    <div class="index_nav">
      <div class="inner">
        <!-- <span>数据标注</span> -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane class="index_nav_tabs" label="数据标注" name="first"
            ><div>
              <div class="index_nav_tabs_r_box">
                <div class="index_nav_tabs_r"></div>
              </div>
              <div>
                <h1 class="index_nav_tabs_title">数据标注解决方案</h1>
                <p class="index_nav_tabs_desc">
                  使用高质量高效率的集约化数据标注模式满足用户对AI数据的需求，交付标准化、结构化的可用数据，助力用户完成算法模型训练、展开机器学习，提高AI领域竞争力
                </p>
                <div>
                  <el-button
                    v-if="this.role == 'manage' || this.uid == '2375374'"
                    class="btn btn_left"
                    type="primary"
                    @click="handleBoard"
                    >运营看板</el-button
                  >
                  <!-- <el-button type="text" class="btn btn_mid" @click="handleTask"
                  >任务平台</el-button
                > -->
                  <el-button
                    v-if="this.role == 'work' || this.uid == '2375374'"
                    type="info"
                    class="btn btn_mid"
                    @click="handleCenter"
                    >个人中心</el-button
                  >
                </div>
              </div>
            </div></el-tab-pane
          >
        </el-tabs>
        <span class="upload-file">
          <!-- <el-button
            size="small"
            type="info"
            round
            @click="dialogAddFile = true"
            >上传数据</el-button
          > -->
        </span>
      </div>
    </div>
    <div class="main">
      <div class="inner"></div>
    </div>
    <!-- 项目展示部分 -->
    <!-- 项目展示部分之项目介绍 -->
    <div class="contant_desc">
      <div class="desc_project inner">
        <p class="desc_project_title">项目案例</p>
        <!-- <p class="desc_project_title_desc">
          项目案例描述简介，含盖3大板块业务场景。
        </p> -->
        <ul class="inner">
          <li
            class="desc_project_item"
            v-for="(item, index) in desc_project_list"
            :key="index"
          >
            <img class="desc_project_item_img" :src="item.url" />
            <p class="desc_project_item_title">{{ item.title }}</p>
            <span class="btmLine"></span>
            <p class="desc_project_item_text">{{ item.text }}</p>
          </li>
        </ul>
      </div>
      <!--项目展示部分之应用场景 -->
      <div class="desc_sence inner">
        <p class="desc_sence_title">应用场景</p>
        <!-- <p class="desc_sence_title_desc">
          应用场景描述简介，含盖3大板块业务场景。
        </p> -->

        <el-tabs
          class="sence_out"
          v-model="activeNameOut"
          @tab-click="handleClick"
        >
          <el-tab-pane name="first">
            <!-- 外场景标题 -->
            <span class="sence_out_item" slot="label">
              <i class="iconfont sence_out_icon">&#xe8bf;</i>
              <span>视觉场景</span>
            </span>
            <!-- 每个场景下的内容区域 -->
            <div class="sence_info">
              <Tabs
                @indexChange="indexChangeFun"
                :currentIndex="currentIndex1"
                :list="tabListImg"
              ></Tabs>
            </div>
          </el-tab-pane>
          <el-tab-pane name="second">
            <span class="sence_out_item" slot="label">
              <i class="iconfont sence_out_icon">&#xe8c2;</i>
              <span>语音识别</span>
            </span>
            <div class="sence_info">
              <Tabs
                @indexChange="indexChangeFun"
                :currentIndex="currentIndex1"
                :list="tabListVoice"
              ></Tabs>
            </div>
          </el-tab-pane>
          <el-tab-pane name="third">
            <span class="sence_out_item" slot="label">
              <i class="iconfont sence_out_icon">&#xe60d;</i>
              <span>语义场景</span>
            </span>
            <div class="sence_info">
              <Tabs
                :currentIndex="currentIndex1"
                @indexChange.self="indexChangeFun"
                :list="tabListText"
              ></Tabs>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="footer">
      <div class="footer_content">© 版权所有中国建设银行</div>
    </div>
  </div>
</template>

<script>
let dev = /^dev.+$/.test(window.document.domain) ? 'dev.' : '';
let offline = /^offline.+$/.test(document.domain) ? 'offline.' : '';
let prefix = offline != '' ? offline : dev

import {getuserInfo} from "@/api/all.js"
import Tabs from '@/components/indexPageTabs/Tabs.vue'
/* import Cookies from 'js-cookie' */
import { getToken } from '@/utils/auth'
// import { uploadFile } from "@/api/all.js";
export default {
  components:{
    Tabs
  },
  name:"indexpage",
  data() {
    return {
      token:'',
      uid:'',
      currentIndex1:0,
      dialogAddFile: false,
      addName: "上传文件",
      activeName:"first",
      activeNameOut:"first",
      addArr: [],
      desc_project_list:[
        { url: require("../../assets/imgs/indexPage/projectImgs/wh.jpg"), title: "外汇智能审核标注",text:"外汇智能审核项目是我行践行 “三大”战略，增强“三个能力的重点实施项目，通过对外汇业务18类凭证进行分类标注和对报关单要素进行要素提取，助力人工智能技术在外汇领域应用，实现外汇业务合规性与国际收支统计申报信息正确性自动审核的创新举措。" },
        { url: require("../../assets/imgs/indexPage/projectImgs/jh.jpg"), title: "稽核智能识别标注",text:"稽核智能识别项目是我行渠运风险领域的重点实施项目，通过对15类通用机打凭证进行分类标注和对6种影像要素进行要素提取，助力人工智能技术在稽核领域应用，实现业务监管合规与稽核风险防控。"},
        { url: require("../../assets/imgs/indexPage/projectImgs/lc.jpg"), title: "理财双录视频质检",text:"理财双录视频质检是我行P9USD组件接入，视频抽帧，外部标注工具集成的重点实施项目，通过标注数据线上化，抽帧自动化，标注工具可拓展的特性，助力人工智能技术在质检领域应用，实现智能化视频质检的重要举措。" }
      ],
      tabListImg: [
        /* {
          id:1,
          title: "图片语义分割",
          img: require("../../assets/imgs/indexPage/projectImgs/yyfg.jpg"),
          text1: "图像语义分割",
          text2: "基于百度标注基地人力可实现千万量级的图片清洗分类，依据您的需求可对您提供的图片集做属性归类，助力图像识别模型训练，可应用于智慧零售、智能设备、智能文娱等场景。",
          text3: "标注能力∶300W 图/天",
        }, */
        {
          id:2,
          title: "图片/视频分类",
          img: require("../../assets/imgs/indexPage/projectImgs/tsfl.png"),
          text1: "图片/视频分类",
          text2: "依据需求可对提供的图片集/视频行业图片做属性归类，助力图像识别模型训练，可应用于智慧金融、智慧零售、智能设备、智能文娱等场景。",
          text3: "标注能力∶15000 图/天",
        },
        {
          id:3,
          title: "图片框选",
          img: require("../../assets/imgs/indexPage/projectImgs/tpkx.png"),
          text1: "图片框选",
          text2: "图片框选可助力图像识别模型训练，用于框选图片中的识别主体目标，常见于对人脸、人体、障碍物、红绿灯的框选，可应用于智能驾驶、智能安防、智能设备的场景落地",
          text3: "标注能力∶15000 图/天",
        },
        {
          id:4,
          title: "人脸骨骼打点",
          img: require("../../assets/imgs/indexPage/projectImgs/rlgg.png"),
          text1: "人脸骨骼打点",
          text2: "人脸骨骼打点是基于点的标注，多应用于标注图片中人脸五官、人体骨骼关键点和汽车轮胎接地点，助力于图像识别模型训练，可应用于智能驾驶、智能设备、智能安防场景落地。",
          text3: "标注能力∶15000 图/天",
        },
        /* {
          id:5,
          title: "3D点云/2D3D融合标注",
          img: require("../../assets/imgs/indexPage/projectImgs/image009.gif"),
          text1: "图片分类",
          text2: "基于百度标注基地人力可实现千万量级的图片清洗分类，依据您的需求可对您提供的图片集做属性归类，助力图像识别模型训练，可应用于智慧零售、智能设备、智能文娱等场景。",
          text3: "标注能力∶300W 图/天",
          text4: "视频分类",
          text5: "视频分类是通过观看视频片段对视频按主题进行分类，助力建立视频资料库，常用于视频行业的图像识别模型训练，可应用于智慧文娱场景的落地。",
          text6: "标注能力∶1W段/天",
        }, */
        {
          id:6,
          title: "连续帧标注",
          img: require("../../assets/imgs/indexPage/projectImgs/lxzbz.png"),
          text1: "连续帧标注",
          text2: "连续帧标注常用于自动驾驶及视频图像识别模型的训练，通过对视频进行抽帧，并对每一帧图片中的目标物体进行连续标注，可应用于智慧金融、智能驾驶、智能安防、智能设备的场景落地。",
          text3: "标注能力∶15000 图/天",
        }
      ],
      tabListVoice: [
        {
          id:1,
          title: "语音分类",
          img: require("../../assets/imgs/indexPage/projectImgs/yyfl.png"),
          text1: "语音分类",
          text2: "通过人工进行监听，筛选出符合要求的音频，助力语音识别模型训练，可应用于智慧金融、智能家居、智能设备、智能客服、智慧门店等场景落地。",
          text3: "标注能力∶11000 条/天",
        },
        {
          id:3,
          title: "语音切分",
          img: require("../../assets/imgs/indexPage/projectImgs/yyqf.png"),
          text1: "语音切分",
          text2: "语音切分是对长音频进行监听，标注音频中说话人的起始点，用于语音识别模型训练，应用于智慧金融、智能家居、智能设备、智能客服、智慧门店等场景落地。",
          text3: "标注能力∶11000 条/天",
        },
        {
          id:4,
          title: "音素标注",
          img: require("../../assets/imgs/indexPage/projectImgs/ysbz.png"),
          text1: "音素标注",
          text2: "音素标注是对音频进行监听，转写文本同时对文字的音标进行标注，常用于语音合成技术。",
          text3: "标注能力∶11000 条/天"
        }
      ],
      tabListText: [
        {
          id:2,
          title: "文本分类",
          img: require("../../assets/imgs/indexPage/projectImgs/wbfl.png"),
          text1: "文本分类",
          text2: "文本分类是按照需求的规则对文本进行属性分类，助力智慧金融、NLP模型训练，可应用于智能客服、智能驾驶等场景",
          text3: "标注能力∶15000 段/天"
        },
        {
          id:4,
          title: "OCR转写",
          img: require("../../assets/imgs/indexPage/projectImgs/ocr.png"),
          text1: "OCR转写",
          text2: "OCR转写是对图片中的文字内容进行标框和转写，支持中文、英文等图片转写，助力图片和文本识别模型，可应用于智慧金融、智慧文娱、智能设备等场景。",
          text3: "标注能力∶15000 段/天",
        },
        {
          id:5,
          title: "情感标注",
          img: require("../../assets/imgs/indexPage/projectImgs/qgbz.png"),
          text1: "情感标注",
          text2: "情感标注是对文本表达情绪倾向进行判断，分类积极和消极的文本，可助力NLP模型训练，可应用于智慧金融、智能家居、智慧文娱等场景。",
          text3: "标注能力∶15000 段/天",
        },
        {
          id:6,
          title: "NLP标注",
          img: require("../../assets/imgs/indexPage/projectImgs/nlp.png"),
          text1: "NLP标注",
          text2: "NLP标注是对文本要素的标注，包括内容提取、文本关系等，可助力NLP模型训练，可应用于智慧金融、智能家居、智慧文娱等场景。",
          text3: "标注能力∶15000 段/天",
        }
      ],
      taskUrl: ""
    };
  },
  methods: {
    //登录状态按钮：根据isLogin的状态来判断登录的状态
    //登录函数
    handleLogin() {
        /* localStorage.removeItem('token');
        window.location=`http://${prefix}128.196.150:86:1345?referer=${location.origin}` */
        /* let params = window.location.search; */
        
        let dev = /^dev.+$/.test(window.document.domain) ? 'dev.' : '';
        let offline = /^offline.+$/.test(window.document.domain) ? 'offline.' : '';
        let prefix = offline != '' ? offline : dev
        //登录是85
        let login_ip = this.$store.state.login_ip
       
        window.location = `http://${prefix}${login_ip}/weblogin/password?referer=${location.origin}/#/indexPage`;
        this.$message({
            type: "success",
            message: "正在跳转登录页!"
          });
        },
    //true表示已经登录，显示用户信息，false表示未登录，请登录
    loginout() {
      let dev = /^dev.+$/.test(window.document.domain) ? "dev." : "";
      let offline = /^offline.+$/.test(document.domain) ? "offline." : "";
      let prefix = offline != "" ? offline : dev;
      //1移除本地token
      this.$message('已退出当前账号');
      this.$store.state.loginState=false
      /* userLoginOut(window.localStorage.getItem('token')) */
      window.localStorage.clear()
      window.location.href = '/';

      /* Cookies.remove('token', { path: '/', domain: 'longmaosoft.com' }); */
      //发送请求移除token
      //跳转到登录页面
      // window.location=`http://${prefix}128.196.150:86:1345?referer=${location.origin}`
       /*  window.location = `http://${prefix}128.196.150:86:1345/password?referer=${window.location.href}` */
      /* this.$router. */
    },
    //tab鼠标事件
    mouseOver() {
    },
    handleClick(tab, event) {
      this.currentIndex1=0
    },
    handleBoard() {
      const { href } = this.$router.resolve({
        name: "board"
      });
      window.open(href, "_blank");
    },
    handleCenter(){
      if (getToken()) {
        const { href } = this.$router.resolve({
        name: "user"
      });
      window.open(href, "_blank");
      }else{
        this.$message({
            type: "warning",
            message: "请先登录"
          });
          this.handleLogin()
      }
    },
   /*  handleTask() {
      if (getToken()) {
        this.taskUrl=`http://128.196.150.85:1350/renwu?token=${getToken()}`
      window.open(this.taskUrl);
      }else{
        this.$message({
            type: "warning",
            message: "请先登录"
          });
          this.handleLogin();
      }
    }, */
    //tabs组件监听方法
    indexChangeFun(data){
      console.log(data);
        this.currentIndex1=data
      },
    userInfoFun(token) {
       getuserInfo(token)
        .then(res => {
           this.uid = res.object.uid;
           if (res.object.role) {
             this.role=res.object.role
           }
          //  20211103增加获取用户名
        })
    },
    /* createList(this.listQuery).then(res => {
        if (res.code == "200") {
          this.list = res.result.rows;
          console.log("this.list ", this.list);
          this.total = res.result.total;
        }
      }); */
  },
  created() {
    //每次刷新获取url里面的token参数
    console.log('重新加载页面');
    let params = window.location.search
    this.token = params.replace(/^.+token=([^&=]+).*$/, '$1').toString();
    //获取动态task的地址，应用于测试或者生产环境
    if (this.token&&!window.localStorage.getItem('token')) {
      /* localStorage.getItem('token') */
      console.log("this.token:",this.token);
      window.localStorage.setItem('token',this.token)
      this.$store.state.loginState=true
      this.userInfoFun(this.token)
      window.localStorage.setItem('uid',this.uid)
      console.log('this.uid',this.uid);
      console.log('重新加载页面1');
    }else if (window.localStorage.getItem('token')&&!this.token) {
      this.$store.state.loginState=true;
      this.userInfoFun(window.localStorage.getItem('token'));
      console.log(this.uid);
      console.log('重新加载页面2');
      this.uid=window.localStorage.getItem('uid')
      //刷新
    } else if (this.token&&window.localStorage.getItem('token')) {
      console.log("路由带token且已经存在本地");
      this.$store.state.loginState=true
      this.userInfoFun(window.localStorage.getItem('token'))
      window.localStorage.setItem('uid',this.uid)
      console.log("this.uid",this.uid);
    } else {
      this.$store.state.loginState=false
    }
    
  },
  mounted() {
    //监听浏览器关闭，移除token,仅限于主页
    if (this.uid=='2375374') {
      document.querySelector('.btn_mid').style.marginLeft="1.5rem"
    }else{
      if (document.querySelector('.btn_mid')) {
        document.querySelector('.btn_mid').style.marginLeft="1.5rem"
      }
    }
    window.onbeforeunload = function (e) {
      var storage = window.localStorage;
      storage.clear()
    }
  },
};
</script>
<style>
.index_nav .inner .el-tabs__item {
  color: #fff;
}
.index_nav .inner .el-tabs__item:hover {
  color: #409eff;
}
.index_nav .inner .is-active {
  color: #409eff;
}
.index_nav .inner .el-tabs__nav-wrap::after {
  background-color: rgba(0, 14, 43, 1);
}
/* 设置tabs标签栏水平居中 */
.desc_sence .el-tabs__nav-scroll {
  text-align: center;
}
.desc_sence .el-tabs__nav {
  float: none;
}
.desc_sence .el-tabs__active-bar {
  left: 23.5%;
}
.desc_sence .el-tabs__item {
  height: 60px;
  width: 208px;
}
</style>
<style lang="less" scoped>
.inner {
  width: 1160px;
  margin: auto;
}
.contant {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  font-size: 16px !important;
  background-color: rgba(250, 251, 255, 1);
  .header {
    height: 80px;
    .header_info {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: space-between;
      .header_info_imgs {
        display: flex;
        align-items: center;
      }
      .login_btns {
        display: flex;
        align-items: center;
        width: 98px;
        height: 45px;
        overflow: hidden;
        border-radius: 5px;
        color: #ffffff;
        .login_btns_l {
          font-size: 16px;
          color: #fff;
          cursor: pointer;
          height: 100%;
          width: 100%;
          border: none;
          background: linear-gradient(
            90deg,
            rgba(2, 173, 255, 1) 1%,
            rgba(87, 111, 251, 1) 100%
          );
        }
        .login_btns_l:hover {
          background: inherit;
          background-color: rgba(87, 111, 251, 1);
        }
      }
    }
  }
  .index_nav {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    height: 45px;
    line-height: 45px;
    left: 0px;
    color: rgb(214, 205, 205);
    background-color: rgba(0, 14, 43, 1);
    .index_nav_tabs {
      height: 466px;
      width: 100%;
      .index_nav_tabs_r_box {
        position: relative;
        height: 500px;
        width: 1160px;
        .index_nav_tabs_r {
          opacity: 0.36;
          position: absolute;
          right: 0;
          bottom: 100px;
          width: 734px;
          height: 393px;
          background-image: url("../../assets/imgs/indexPage/u17.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          z-index: 3;
        }
        .index_nav_tabs_r_second {
          opacity: 0.8;
          position: absolute;
          right: 0;
          bottom: 110px;
          width: 379px;
          height: 377px;
          background-image: url("../../assets/imgs/indexPage/u25.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          z-index: 6;
        }
      }
      .index_nav_tabs_title {
        position: absolute;
        top: 70px;
        color: white;
        font-weight: 400;
        font-style: normal;
        font-size: 36px;
        color: #ffffff;
        z-index: 3;
      }
      .index_nav_tabs_desc {
        position: absolute;
        top: 170px;
        width: 600px;
        color: rgb(214, 205, 205);
        font-weight: 400;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.803921568627451);
        text-align: justify;
        text-justify: inter-word;
        line-height: 26px;
        z-index: 3;
      }
      .btn {
        width: 200px;
        height: 45px;
        position: absolute;
        bottom: 120px;
        font-weight: 400;
        font-size: 16px;
        z-index: 3;
      }
      .btn_mid {
        color: #fff;
        border: 1px solid #fff;
        margin-left: 0;
        /* margin-left: 220px; */
      }
      .btn_mid:hover {
        background-color: #fff;
        color: #409eff;
      }
      .btn_right {
        border: 1px solid #fff;
        margin-left: 440px;
      }
      .btn_right:hover {
        background-color: #fff;
        color: #409eff;
      }
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
    span {
      cursor: pointer;
    }
    span:hover {
      color: white;
    }
    .upload-file {
      float: right;
    }
  }
  .main {
    position: absolute;
    top: 125px;
    width: 100%;
    height: 425px;
    min-width: 1160px;
    background-color: rgba(0, 18, 53, 1);
    background-image: url("../../assets/imgs/indexPage/u16_state0.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 100% 80%;
    background-origin: border-box;
    z-index: 1;
  }
  .contant_desc {
    position: relative;
    left: 0px;
    top: 500px;
    right: 0;
    padding: 0 20px 0px 40px;

    .desc_project {
      position: absolute;
      top: 15px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      color: #666;
      .desc_project_item:hover {
        box-shadow: 5px 5px 10px rgb(136 136 136 / 39%);
      }
      .desc_project_item {
        padding: 10px;
        box-sizing: border-box;

        .desc_project_item_img {
          width: 351px;
          height: 165px;
        }
        .desc_project_item_title,
        .desc_project_item_text,
        .btmLine {
          text-align: left;
        }
        .desc_project_item_title {
          color: #409eff;
        }
        .btmLine {
          display: inline-block;
          width: 66px;
          height: 1px;
          border-top: 1px solid #409eff;
        }
        .desc_project_item_text {
          height: 118px;
          color: #888;
          line-height: 23px;
          font-size: 14px;
          overflow: auto;
          padding-bottom: 0;
        }
      }
      .desc_project_title {
        font-size: 28px;
        text-align: center;
      }
      .desc_project_title_desc {
        margin-top: 20px;
        font-size: 14px;
        text-align: center;
      }
      ul {
        margin-top: 40px;
        display: flex;
        justify-content: space-around;
        li {
          width: 32%;
          min-width: 200px;
          height: 400px;
          background-color: rgba(255, 255, 255, 1);
          border: none;
          border-radius: 5px;
          box-shadow: 5px 5px 10px rgb(238 243 251 / 100%);
          p {
            padding: 20px 0;
            text-align: center;
          }
        }
      }
    }
    .desc_sence {
      position: relative;
      top: 570px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      color: #666;
      .desc_sence_title {
        font-size: 28px;
        text-align: center;
      }
      .desc_sence_title_desc {
        margin-top: 30px;
        font-size: 14px;
        text-align: center;
      }
      //tabs
      .sence_out {
        margin-top: 40px;
        width: 1160px;
        text-align: center;
        .sence_out_item,
        .sence_out_icon {
          font-size: 18px;
        }
        .sence_out_icon {
          margin-right: 5px;
        }
        .sence_info {
          width: 100%;
          height: 598px;
          margin-top: 20px;
          background-color: #fff;
        }
      }
    }
  }

  .footer {
    position: absolute;
    top: 2021px;
    padding-bottom: 170px;
    line-height: 170px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    box-sizing: border-box;
    .footer_content {
      width: 100%;
      height: 100%;
      color: #7f7f7f;
      display: flex;
      align-item: center;
      justify-content: center;
      font-size: 12px;
    }
  }
}
</style>
